import React, { useState, useEffect } from "react"
import './App.css'
import { BellOutline, SetOutline, BillOutline, BankcardOutline, RightOutline, AppOutline } from 'antd-mobile-icons'
import img from '../img/1.png'
import { CouponO, BalanceListO, LabelO, VipCardO, QuestionO, GuideO, StarO, OrdersO } from '@react-vant/icons';
import { Swiper, Dialog } from 'react-vant';
import { useNavigate } from "react-router-dom";
import axios from 'axios'

function App() {
    const navigate = useNavigate()
    const [showQRCode, setShowQRCode] = useState(false);

    const items = [
        img,
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.Ey9VUlVmgpFr_0Qa2wJFFgHaFS?w=280&h=189&c=7&r=0&o=5&dpr=1.5&pid=1.7',
        'https://tse3-mm.cn.bing.net/th/id/OIP-C.iH5i6Mmf5rmgXqv-kqcFYwHaEo?w=312&h=194&c=7&r=0&o=5&dpr=1.5&pid=1.7',
        'https://tse2-mm.cn.bing.net/th/id/OIP-C.m1Q4Tb0gRHIrwgUZGQGESAHaFj?w=274&h=205&c=7&r=0&o=5&dpr=1.5&pid=1.7'
    ]

    const handleQRCodeClick = () => {
        setShowQRCode(true);
    }

    const isshow = () => {
        setShowQRCode(false)
    }

    const toTotalMenu = () => {
        navigate('/TotalMenu')
    }

    const toDaizhifu = () => {
        navigate('/Daizhifu')
    }

    const toDairuzhu = () => {
        navigate('/Dairuzhu')
    }

    const toRuzhuzhong = () => {
        navigate('/Ruzhuzhong')
    }

    const toYituifang = () => {
        navigate('/Yituifang')
    }

    const [total, setTotal] = useState('')
    const [list, setList] = useState([])
    const getList = async () => {
        await axios.post("http://localhost:3010/roomDingList")
            .then(res => {
                if (res.data.code == 200) {
                    setList(res.data.list)
                    getTotal(res.data.list)
                }
            })
    }

    const getTotal = (List) => {
        const pendingTotal = List.filter(item => item.status === '待入住').length
        setTotal(pendingTotal)
    }

    useEffect(() => {
        getList()
    }, [])
    return (
        <>
            <div className="xmhbox">
                <div className="xmhtop">
                    <span style={{ color: 'white', marginLeft: "0.5rem" }}>我的</span>
                    {/* QR Code in top right corner */}
                    <div className="qr-code-icon" onClick={handleQRCodeClick}>
                        <img style={{ width: '0.7rem', height: '0.7rem' }} src="https://img.icons8.com/ios/50/000000/qr-code--v1.png" alt="QR Code" />
                    </div>
                </div>

                <div className="xmhcontent1">
                    <div className="xbox1">
                        <img className="xmhimg" src="https://tse4-mm.cn.bing.net/th/id/OIP-C.FdRoVAPPml7ILPn2QeSAywAAAA?w=225&h=220&c=7&r=0&o=5&dpr=1.5&pid=1.7" style={{ width: '1.6rem', height: '1.6rem' }} alt="" />
                    </div>
                    <div className="xbox2">
                        <p style={{ display: 'flex' }}><span>11111</span><span className="xren">已认证</span></p>
                        <p style={{ display: 'flex' }}><span className="xbang">绑定</span><span>13377476688</span></p>
                        <p className="vip"><i>VIP</i></p>
                    </div>
                    <div className="xbox3">
                        <BellOutline style={{ color: 'red', marginRight: '20px' }}></BellOutline>
                        <SetOutline></SetOutline>
                    </div>
                </div>

                <div className="xmhcontent2">
                    <div>
                        <span>
                            <BillOutline style={{ marginRight: '15px', color: 'rgb(255, 118, 32)', fontSize: '0.4rem' }}></BillOutline>
                        </span>
                        <span>余额：￥3000</span>
                    </div>
                    <div>
                        <span><BankcardOutline style={{ marginRight: '15px', color: 'rgb(215, 195, 35)', fontSize: '0.4rem' }}></BankcardOutline></span>
                        <span>积分：2758</span>
                    </div>
                </div>

                <div className="order-section">
                    <div className="order-header">
                        <span><b>酒店订单</b></span>
                        <span className="view-all" onClick={() => toTotalMenu()}>全部订单 <RightOutline onClick={() => toTotalMenu()} /></span>
                    </div>
                    <div className="order-status">
                        <div className="status-item">
                            <AppOutline onClick={() => toDaizhifu()} style={{ fontSize: '0.7rem', color: '#00a950', marginBottom: '0.1rem' }}></AppOutline>
                            <span onClick={() => toDaizhifu()}>待支付</span>
                        </div>
                        <div className="status-item">
                            <GuideO style={{ fontSize: '0.7rem', color: '#1eb7fd', marginBottom: '0.1rem' }} onClick={() => toDairuzhu()}></GuideO>
                            {total > 0 ? <span className="badge">{total}</span> : <span></span>}
                            <span onClick={() => toDairuzhu()}>待入住</span>
                        </div>
                        <div className="status-item">
                            <StarO onClick={() => toRuzhuzhong()} style={{ fontSize: '0.7rem', color: '#ff0000', marginBottom: '0.1rem' }}></StarO>
                            <span onClick={() => toRuzhuzhong()}>入住中</span>
                        </div>
                        <div className="status-item">
                            <OrdersO onClick={() => toYituifang()} style={{ fontSize: '0.7rem', color: '#6f6f6f', marginBottom: '0.1rem' }}></OrdersO>
                            <span onClick={() => toYituifang()}>已退房</span>
                        </div>
                    </div>
                </div>

                {/* Banner section */}
                <div className="banner-section">
                    <Swiper autoplay={2000}>
                        {items.map((item, index) => (
                            <Swiper.Item key={index}>
                                <img src={item} alt="Banner" style={{ width: '100%', height: '4rem' }} />
                            </Swiper.Item>
                        ))
                        }</Swiper>
                </div>

                {/* Menu list section */}
                <div className="menu-list">
                    <div className="menu-item">
                        <span>
                            <CouponO className="xicon1"></CouponO>
                        </span>
                        <span style={{ marginRight: '0.1rem' }}>优惠券</span>
                        <RightOutline />
                    </div>
                    <div className="menu-item">
                        <span>
                            <BalanceListO className="xicon2"></BalanceListO>
                        </span>
                        <span style={{ marginRight: '0.1rem' }}>商城订单</span>
                        <RightOutline />
                    </div>
                    <div className="menu-item">
                        <span >
                            <LabelO className="xicon3"></LabelO>
                        </span>
                        <span style={{ marginRight: '0.1rem' }}>住宿返现</span>
                        <RightOutline />
                    </div>
                    <div className="menu-item">
                        <span>
                            <VipCardO className="xicon4"></VipCardO>
                        </span>
                        <span style={{ marginRight: '0.1rem' }} onClick={()=>{navigate("/vip")}}>会员中心</span>
                        <RightOutline />
                    </div>
                    <div className="menu-item">
                        <span>
                            <QuestionO className="xicon5"></QuestionO>
                        </span>
                        <span style={{ marginRight: '0.1rem' }}>常见问题</span>
                        <RightOutline />
                    </div>
                </div>
            </div>

            {/* QR Code Dialog */}
            <Dialog
                visible={showQRCode}
                title="请向前台出示二维码快速入住"
                showConfirmButton={false}
                closeOnClickOverlay

            >
                <div className="qr-code-container">
                    <span onClick={isshow} className="xnoshow">×</span>
                    <img
                        src="https://api.qrserver.com/v1/create-qr-code/?size=200x200&data=https://example.com/user/123456"
                        alt="User QR Code"
                        className="qr-code-image"
                        style={{ marginTop: '20px' }}
                    />
                    <p className="qr-code-text" style={{ marginTop: '15px' }}>扫一扫查看我的信息</p>
                </div>
            </Dialog>
        </>
    )
}

export default App